<template>
	<view class="reportBody">
		<div>
			<navitop>
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="outlot"></i>
				<span slot="center-slot"><h4>{{title}}</h4></span>
				<i  slot="right-slot" class="iconfont icon-youcecaidan" v-if="tab_nav" @click="class_sort"></i>
			</navitop> 
		</div>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :style="'margin-top:' + nv_height">
			<view>
				<v-tabs v-model="current" :scroll="scroll_one" line-height="0" pillsColor="#1296db" activeColor="#fff"
					:pills="true" :tabs="tabs" @change="changeTab"></v-tabs>
			</view>
			<view class="list" v-for="(item,index) in dataSorce" :key="index" @click="Eidt_data(item)">
				<view class="ItemView">
					<view class="ItemName">标题: {{item.title}}</view>
					<view class="ItemName">提交人:{{item.createUserName}}</view>
					<view class="ItemName">添加时间:{{item.createDate}}</view>
				</view>
			</view>
		</mescroll-body>
		
		<!-- 气泡弹窗 -->
		 <chunLei-popups v-model="value" :popData="data" @tapPopup="tapPopup" :x="345" :y="95" placement="top-end">
		 </chunLei-popups>
	</view>
</template>

<script>
	import navitop from '@/components/common/navi-top'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups";
	import {pageList} from '@/common/api/job/office.js'
	export default {
		components:{
			navitop,
			chunLeiPopups
		},
		mixins: [MescrollMixin],
		data() {
			return {
				tabs: [],
				data: [		// 气泡弹窗数据
					{title:'新增',code:'add',icon:'icon-tianjiaadd143'},
				],
				current: 0,	// 切换组件选中值
				scroll_one: false,  //设置tabs选项是否平铺 
				dataSorce: [],
				// 下拉刷新的配置
				downOption: {
					auto: false,
					beforeEndDelay: 300,
				},
				// 上拉加载的配置
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						use: true,
						tip: '暂无相关数据'
					},
					textNoMore: '没有更多数据了...',
					toTop: {
						offset: 1000 // 滚动多少才显示to-top 
					}
				},
				nv_height: '',
				title: ''	,// 导航显示
				key:'',		// 分类key
				tab_key: 1,	// 切换key
				value:false,	// 气泡弹窗显示
				tab_nav: true,	// 头部菜单显示
				pages: 1,		// 默认分页
			}
		},
		onLoad(option) {
			this.title = option.title;
			this.key = option.key;
			this.tab_list(option.key);
			
		},
		//方法主动触发下拉刷新动画且请求第一页数据
		// onShow() {
		// 	setTimeout(()=>{
		// 		this.mescroll.triggerDownScroll();
		// 	},500)
		// },
		mounted() {
			 this.nv_height = uni.getSystemInfoSync().statusBarHeight + 75 + 'px';
			 //  获取列表
			 this.office_list(this.tab_key,this.pages);
		},
		methods: {
			
			// 修改
			Eidt_data(val){
				uni.navigateTo({
					url: "/pages/common/index/office/officeedit?id=" + val.id + '&tabKey=' + this.tab_key + '&key=' + this.key + '&title=' + this.title
				})
			},
			
			// 切换列表
			tab_list(val){
				if(val == 1){
					this.tabs = ['我的计划', '报送给我的','抄送给我的'];
					this.tab_nav = true;
				}
				if(val == 2){
					this.tabs = ['我的总结', '报送给我的','抄送给我的'];
					this.tab_nav = true;
				}
				if(val == 3){
					this.tabs = ['我的报表', '报送给我的','抄送给我的'];
					this.tab_nav = true;
				}
			},
			
			// 导航操作
			class_sort(){
				this.value = !this.value;
			},
			
			tapPopup(val){
				if(val.code == 'add'){
					uni.navigateTo({
						url: '/pages/common/index/office/officeadd?title=' + val.title + '&key=' + this.key + '&name=' + this.title
					})
				}
			},
			
			// 切换返回结果
			changeTab(val){
				this.pages = 1;
				if(val !== 0){
					this.tab_nav = false;
				}else {
					this.tab_nav = true;
				}
				this.office_list(val+1,this.pages);
				this.tab_key = val + 1;
			},
			
			// 返回
			outlot(){
				uni.navigateBack({
					url: '/pages/index/index'
				})
			},
			
			office_list(val_key,pages){
				let _this = this;
				uni.showLoading({
					title: '加载中...'
				})
				pageList({current: pages,size: 20,tabKey: val_key,workType: this.key}).then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						if(pages == 1){
							this.dataSorce = rows.data.records;
						}else{
							rows.data.records.filter(function (item){
								_this.dataSorce.push(item)
							})
						}
					}
				})
			},
			
			/*下拉刷新的回调*/
			downCallback(val) {
				console.log('下拉--------')
				this.office_list(this.tab_key,this.pages);
				// 下拉刷新和上拉加载调同样的接口,直接mescroll.resetUpScroll()即可
				setTimeout(() => {
					this.mescroll.endSuccess();
				}, 500)
			},

			// 上拉加载
			upCallback(page) {
				this.pages++;
				let sun = this.pages;
				// let obj = {
				// 	current: page.num, // 页码, 默认1
				// 	size: page.size, // 页长, 默认10条
				// };
				this.office_list(this.tab_key,sun);
				setTimeout(()=>{
					this.mescroll.endErr();
				},500)
			},
		}
	}
</script>

<style scoped lang="scss">
	.reportBody {
		width: 100%;
		height: 100vh;
		padding-top: 5rpx;
	}

	.list {
		padding: 10rpx 0 25rpx;
		// width: 720rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 10rpx 15rpx;
		background-color: white;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.ItemView {
		// width: 350rpx;
		// display: flex;
		// flex-direction: row;
		margin-left: 10rpx;
		align-items: center;
		margin-top: 15rpx;
		background-color: white;
	}

	.ItemName {
		font-size: 30rpx;
		padding: 5px 0 0 30rpx;
	}

</style>
